import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import {
    Actions
} from 'react-native-router-flux';

import {
    Tip,
    Loading,
    Layout,
    Input,
    Button,
} from './../../components';

import * as Const from './../../const';

import connect from './../../utils/connect';
import userAction from './../../state/actions/user';
import * as userTypes from './../../state/types/user';

interface State {
    username:string,
    password?: string
}

interface Props {
    userActions?: any
}

@connect({
    userActions: userAction
})
class Login extends PureComponent <Props, State> {

    state = {
        username:``,
        password: ``
    }

    private _onPasswordChange = (val: string) => {
        this.setState({
            password: val
        })
    }

    private _onUserNameChange = (val: string) => {
        this.setState({
            username: val
        })
    }

    get disabled() {
        const {
            username=``,
            password
        } = this.state;
        return !username || !password;
    }

    private onSuccess = () => {
        Actions.pop()
        Tip.success({
            message:`Save successfully.`
        })
    }

    private _onSubmit = async () => {
        const {
            username,
            password
        } = this.state;

        if(this.disabled) {
            return false
        }

        const {
            userActions
        } = this.props;

        Loading.show();

        try {
            await userActions[
                userTypes.changeUserEmail
            ](username,password);
            this.onSuccess();
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }

        Loading.close();
    }

    private toForgot = async () => {
        Actions.push(`/user/forgot`)
    }

    render() {
        const {
            username,
            password
        } = this.state;
        return (
            <Layout title="Change email" fixed={true}>
                <View style={styles.form}>
                    <Input
                        type="email"
                        value={username}
                        autoFocus={true}
                        placeholder="Email"
                        onChange={this._onUserNameChange}
                    />
                    <Input
                        type="password"
                        value={password}
                        placeholder="Password"
                        onChange={this._onPasswordChange}
                    />
                    <View style={styles.footer}>
                        <Button
                            title="Save"
                            onPress={this._onSubmit}
                            disabled={this.disabled}
                        />
                        <Text style={styles.forgot}>
                            <Text>Forgot password? </Text>
                            <Text
                                style={styles.theme}
                                onPress={this.toForgot}
                            >
                                Click here
                            </Text>
                        </Text>
                    </View>
                </View>
            </Layout>
        )
    }
}

export default Login;

const styles = StyleSheet.create({
    form: {
        paddingVertical:16,
        paddingHorizontal:24
    },
    iconStyle:{
        marginRight:8
    },
    forgot: {
        fontSize: 14,
        marginTop:28,
        color: `#8A92AE`,
        textAlign:`center`
    },
    theme:{
        color:Const.color,
        textDecorationLine: `underline`
    },
    footer:{
        paddingTop:48
    }
}) as any;